<template>
  <div>
    <detail-banner
      :gallaryImgs="gallaryImgs"
      :sightName="sightName"
      :bannerImg="bannerImg"
    ></detail-banner>
    <detail-header></detail-header>

    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>
</template>

<script>
import DetailBanner from "./components/Banner.vue";
import DetailHeader from "./components/Header.vue";
import DetailList from "./components/List.vue";
import axios from "axios";
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
  },
  data() {
    return {
      list: [],
      bannerImg: [],
      gallaryImgs: [],
      sightName: [],
    };
  },
  methods: {
    loadCategory() {
      axios
        .get("http://localhost:3000/categoryList", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.list = res.data;
          console.log(this.list);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loadBannerImg() {
      axios
        .get(" http://localhost:3000/bannerImg", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.bannerImg = res.data;
          console.log(this.bannerImg);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loadGallaryImgs() {
      axios
        .get(" http://localhost:3000/gallaryImgs", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.gallaryImgs = res.data;
          console.log(this.gallaryImgs);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loadSightName() {
      axios
        .get("http://localhost:3000/sightName", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.sightName = res.data;
          console.log(this.sightName);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.loadCategory();
    this.loadBannerImg();
    this.loadGallaryImgs();
    this.loadSightName();
  },
};
</script>

<style lang='stylus' scoped>
.content {
  height: 50rem;
}
</style>